<template>
	<view class="appVersion">
		<view class="information">当前版本<text>v{{DangQianBanBen}}</text>，最新版本<text>v{{latestVersion}}</text></view>

		
		<view
			:class="templateText=='下载最新版'?'update':'update-hover'"
			v-if="ifHaveVersion"
			@click="DianJi_update"
		>
			{{templateText}}
		</view>
		
		
		
		<!-- 安卓端事件 -->
		<!-- #ifdef APP-ANDROID -->
		<view class="schedule" v-if="ifHaveVersion">
			<view class="left">
				<view :style="'width:'+downloadProgress+'%;'"></view>
			</view>
			<view class="right">{{downloadProgress}}%</view>
		</view>
		
		<view class="reminder-information" v-if="ifHaveVersion">
			<text>重要提示：</text>
			<view v-html="prompt"></view>
		</view>
		<!-- #endif -->
		<view v-if="log" class="log" v-html="log"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DangQianBanBen: "",
				latestVersion: "",
				ifHaveVersion:false,
				downloadProgress:"0",
				templateText:"下载最新版",
				log:"",
				prompt:`<p>此版本升级注意！</p>`,
				ifResetting:false
			}
		},
		onLoad() {
			this.DangQianBanBen = plus.runtime.version;
			uni.request({
				url: this.$_Config() + "appVersion.json",
				success: (res) => {
					this.prompt += res.data.prompt;
					this.latestVersion = res.data.latestVersion;
					this.downloadAddress = res.data.downloadAddress;
					this.ifResetting = res.data.resetting;
					this.log = res.data.log;
					if(this.DangQianBanBen == this.latestVersion){
						this.ifHaveVersion = false
					}else{
						this.ifHaveVersion = true
					}
				}
			});
		},
		methods: {
			DianJi_update() {
				// 安卓
				// #ifdef APP-ANDROID
				this.templateText = "下载中";
				const downloadTask = uni.downloadFile({
					url: this.downloadAddress,
					success: (res) => {
						if (res.statusCode === 200) {
							let url = res.tempFilePath;
							uni.openDocument({
								filePath: url,
								success: (_res) => {
									if(this.ifResetting){
										uni.clearStorage()
										uni.clearStorageSync()
									}
								}
							});
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.downloadProgress = res.progress;
				});
				// #endif
				// 苹果
				// #ifdef APP-IOS
				uni.request({
					url: this.$_Config() + "appVersion.json",
					success: (res) => {
						plus.runtime.openURL(res.data.appleStoreAddress)
					}
				});
				// #endif
			}
		},
	}
</script>

<style lang="scss">
.appVersion{
	view{
		font-size: 28rpx;
	}
	.reminder-information{
		margin: 25rpx 25rpx 0 25rpx;
		font-size: 22rpx;
		display: flex;
		text{
			color: $HongSe;
			flex-shrink: 0;
		}
		view{
			font-size: 22rpx;
			p:nth-child(1){
				color: $HongSe;
			}
		}
	}
	.information{
		text-align: center;
		margin: 25rpx 0 0 0;
		text{
			color: $LanSe;
		}
	}
	.update{
		width: 300rpx;
		height: 80rpx;
		background: $HuangSe;
		font-size: 28rpx;
		display: flex;
		align-items:center;
		justify-content:center;
		border-radius: 15rpx;
		margin: 25rpx auto auto auto;
	}
	.update-hover{
		width: 0;
		height: 0;
		overflow: hidden;
		margin: 0;
	}
	.schedule{
		margin: 25rpx 25rpx 0 25rpx;
		display: flex;
		align-items:center;
		.left{
			flex: 1;
			height: 50rpx;
			background: #FFF;
			border-radius: 100rpx;
			border: 1rpx solid #EBEEF5;
			overflow: hidden;
			view{
				height: 50rpx;
				background: #409EFF;
			}
		}
		.right{
			margin: 0 0 0 25rpx;
		}
	}
}
.log{
	padding-bottom: 25rpx;
	h2{
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 20rpx 25rpx;
		background: #F5F7FA;
		border: 1rpx solid #EBEEF5;
		border-left: 10rpx solid #409EFF;
		margin-top: 25rpx;
		font-weight: normal;
	}
	p{
		margin: 25rpx 25rpx 0 25rpx;
		font-size: 28rpx;
	}
}
</style>